<template>
  <div class="factory-certifications">
    <div class="container">
      <h1 class="page-title">{{ $t('routeTitles.factory-certifications') }}</h1>
      
      <div class="certifications-grid">
        <el-card v-for="cert in certifications" :key="cert.id" class="certification-card">
          <div class="cert-image">
            <el-image :src="cert.image" fit="cover" />
          </div>
          <div class="cert-content">
            <h3 class="cert-title">{{ cert.title }}</h3>
            <p class="cert-description">{{ cert.description }}</p>
            <div class="cert-details">
              <span class="cert-date">{{ cert.date }}</span>
              <span class="cert-number">{{ cert.number }}</span>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const certifications = ref([
  {
    id: 1,
    title: 'ISO 9001:2015',
    description: '质量管理体系认证',
    image: '/images/certifications/iso9001.jpg',
    date: '2023-01-15',
    number: 'Q123456'
  },
  {
    id: 2,
    title: 'ISO 14001:2015',
    description: '环境管理体系认证',
    image: '/images/certifications/iso14001.jpg',
    date: '2023-02-20',
    number: 'E234567'
  },
  {
    id: 3,
    title: 'HACCP',
    description: '食品安全管理体系认证',
    image: '/images/certifications/haccp.jpg',
    date: '2023-03-10',
    number: 'H345678'
  },
  {
    id: 4,
    title: 'BRCGS',
    description: '全球食品安全标准认证',
    image: '/images/certifications/brcgs.jpg',
    date: '2023-04-05',
    number: 'B456789'
  }
])
</script>

<style lang="scss" scoped>
.factory-certifications {
  padding: 2rem 0;
  
  .page-title {
    text-align: center;
    margin-bottom: 3rem;
    color: var(--text-primary);
    font-size: 2rem;
  }
  
  .certifications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 1rem;
  }
  
  .certification-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }
    
    .cert-image {
      height: 200px;
      overflow: hidden;
      border-radius: 4px;
      margin-bottom: 1rem;
      
      .el-image {
        width: 100%;
        height: 100%;
      }
    }
    
    .cert-content {
      .cert-title {
        font-size: 1.25rem;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
      }
      
      .cert-description {
        color: var(--text-regular);
        margin-bottom: 1rem;
        line-height: 1.6;
      }
      
      .cert-details {
        display: flex;
        justify-content: space-between;
        color: var(--text-secondary);
        font-size: 0.875rem;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .factory-certifications {
    padding: 1rem 0;
    
    .page-title {
      font-size: 1.5rem;
      margin-bottom: 2rem;
    }
    
    .certifications-grid {
      grid-template-columns: 1fr;
      gap: 1rem;
      padding: 0.5rem;
    }
  }
}
</style> 